<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item :options="options" v-for="(item, index) in messageList" :index="index" :name="index" :key="item.id" @click="slideClick">
			  <view class="swipe-action u-border-top u-border-bottom">
				<view class="swipe-action__content">
				  <u-row customStyle="padding: 8rpx 16rpx" @click="toChat(item)">
				  	<u-col span="2">
				  		<u-avatar size="42" :src="item.image" shape="square"></u-avatar>
				  	</u-col>
				  	<u-col span="10" customStyle="margin-left: -16rpx;">
				  		<view style="display:flex;">
							<view style="flex:4">
								<u--text
									:text="item.name"
									:lines="1"
									bold
									size="15"
								></u--text>
							</view>
				  			<view style="flex:2;margin-left: 120rpx;font-size: 13px;">
				  				<text>{{item.time}}</text>
				  			</view>
				  		</view>
						<view style="margin-top: 6rpx;display:flex;">
							<view style="flex:10">
								<u--text
									:text="item.content"
									size="14"
									:lines="1"
									color="rgb(135 135 135)"
								></u--text>
							</view>
							<view style="flex:1;margin-left: 130rpx;">
								<u-badge numberType="overflow" type="error" max="99" :value="item.noread"></u-badge>
							</view>
						</view>
				  		
				  	</u-col>
				  </u-row>
				</view>
			  </view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		props: ['messageList'],
		name: 'msg-list',
		data() {
			return {
				messageList: [{
					id: 1,
					userId: 2,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "啊哈呦",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 100
				}, {
					id: 2,
					userId: 3,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "华融天和",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 78
				}, {
					id: 3,
					userId: 4,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "好几十",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 2
				}, {
					id: 4,
					userId: 5,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "皇太后",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 867
				}, {
					id: 5,
					userId: 6,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "好几十",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 0
				}, {
					id: 6,
					userId: 7,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "帅哥哥",
					time: "2023-11-12",
					content: "这是一条消息特任何违反个人或个人挺好范围广皇太后",
					noread: 0
				}, {
					id: 7,
					userId: 8,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "好几十",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 0
				}, {
					id: 8,
					userId: 9,
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					name: "好几十",
					time: "2023-11-12",
					content: "这是一条消息特任何违反",
					noread: 0
				}],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c'
						}
					},
				],
			}
		},
		methods: {
			//跳转聊天页面
			toChat(item){
				console.log("跳转 targetId", item.userId)
				var nameList = {
				  myName: '230',
				  your: '15279515773',
				};
				uni.navigateTo({
					//url: `/pages/deal-chat/deal-chat?targetId=${item.userId}&name=${item.name}`
					url: `/pages/chatroom/chatroom?username=${JSON.stringify(nameList)}`
				})
			},
			//移除这条消息
			slideClick(option){
				//index: itme 滑动点击的第几个按钮 name: item标识符
				console.log("option", option)
				this.$emit('removeMsg', option.name)
			},
		}
	}
</script>

<style lang="scss">
	.swipe-action {
		&__content {
			 padding: 25rpx 0;
	
			&__text {
				 font-size: 15px;
				 color: $u-main-color;
				 padding-left: 30rpx;
			 }
		}
	}
</style>
